<!DOCTYPE html><html><head><title>“装X必备”：基于原生JS封装一款专业的DIALOG插件</title><meta charset='utf-8'><link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    

<h3 id="装x必备基于原生js封装一款专业的dialog插件">“装X必备”：基于原生JS封装一款专业的DIALOG插件</h3>

<blockquote>
  <p>讲师：周啸天</p>
  
  <ul><li><p>北京珠峰培训教学总监</p></li>
  <li><p>腾讯体育事业部前端开发负责人</p></li>
  <li><p>十年互联网全栈开发经验</p></li>
  </ul>
  
  <p>上课时间：04/18（周六） 20:00~21:30</p>
</blockquote>

<p>【唠嗑或者咨询课程】</p>

<p><img longdesc="./1585816667198.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p>【获取课件 == 回复 <code>课件</code>】</p>

<p><img longdesc="./1587204344716.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<h4 id="jquery-dialog-和-vue-element">JQUERY-DIALOG 和  VUE-ELEMENT</h4>

<p><a href="https://jqueryui.com/dialog/" target="_blank">https://jqueryui.com/dialog/</a></p>

<p><a href="https://element.eleme.cn/#/zh-CN/component/message" target="_blank">https://element.eleme.cn/#/zh-CN/component/message</a></p>

<h4 id="封装一款专业的dialog插件">封装一款专业的DIALOG插件</h4>

<p><strong>messageplugin</strong></p>



<p><img longdesc="./1587204785805.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*基本语法*/</span>
</div><div class="hljs-line">messageplugin([message]);
</div><div class="hljs-line">messageplugin([options]);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*options配置项*/</span>
</div><div class="hljs-line">messageplugin({
</div><div class="hljs-line">    <span class="hljs-comment">// 声明是message消息类型</span>
</div><div class="hljs-line">    status: <span class="hljs-string">'message'</span>,
</div><div class="hljs-line">    <span class="hljs-comment">// 提示的文案内容</span>
</div><div class="hljs-line">    message: <span class="hljs-string">''</span>,
</div><div class="hljs-line">    <span class="hljs-comment">// 展示的类型 info/warning/success/error</span>
</div><div class="hljs-line">    type: <span class="hljs-string">'info'</span>,
</div><div class="hljs-line">    <span class="hljs-comment">// 自动消失的时间，设置为零则不会自动消失</span>
</div><div class="hljs-line">    duration: <span class="hljs-number">3000</span>,
</div><div class="hljs-line">    <span class="hljs-comment">// 钩子函数 创建/打开/关闭</span>
</div><div class="hljs-line">    oninit(){},
</div><div class="hljs-line">    onopen(){},
</div><div class="hljs-line">    onclose(){}
</div><div class="hljs-line">});
</div></code></pre>

<p><strong>dialogplugin</strong></p>

<p><img longdesc="./1587204806192.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/*基本语法*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">let</span> dialog=dialogplugin([options]);
</div><div class="hljs-line">dialog.open();  <span class="hljs-comment">//=&gt;打开</span>
</div><div class="hljs-line">dialog.close(); <span class="hljs-comment">//=&gt;关闭</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*options配置项*/</span>
</div><div class="hljs-line">dialogplugin({
</div><div class="hljs-line">    <span class="hljs-comment">// 声明是dialog模态框类型</span>
</div><div class="hljs-line">    status: <span class="hljs-string">'dialog'</span>,
</div><div class="hljs-line">    <span class="hljs-comment">// 内容模板 字符串/DOM元素对象</span>
</div><div class="hljs-line">    template: <span class="hljs-literal">null</span>,
</div><div class="hljs-line">    <span class="hljs-comment">// 提示的标题信息</span>
</div><div class="hljs-line">    title: <span class="hljs-string">'系统提示'</span>,
</div><div class="hljs-line">    <span class="hljs-comment">// 自定义按钮组信息</span>
</div><div class="hljs-line">    buttons: [{
</div><div class="hljs-line">        <span class="hljs-comment">// 按钮文字</span>
</div><div class="hljs-line">        text:<span class="hljs-string">'确定'</span>,
</div><div class="hljs-line">        <span class="hljs-comment">// 点击触发的回调函数</span>
</div><div class="hljs-line">        click(){
</div><div class="hljs-line">            <span class="hljs-comment">//this:当前实例</span>
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }],
</div><div class="hljs-line">    <span class="hljs-comment">// 钩子函数 创建/打开/关闭</span>
</div><div class="hljs-line">    oninit(){},
</div><div class="hljs-line">    onopen(){},
</div><div class="hljs-line">    onclose(){}
</div><div class="hljs-line">});
</div></code></pre>

<p><strong>工程目录</strong></p>



<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// UI样式库</span>
</div><div class="hljs-line">|- dialogplugin.css
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 核心JS代码</span>
</div><div class="hljs-line">|- dialogplugin.js
</div></code></pre>

<p><strong>样式处理</strong></p>

<ul><li><p>内置行内样式</p>

<ul>
<li><p>不方便用户自定义样式</p></li>
<li><p>代码管理起来不易</p></li>
<li><p>好处：用户调用比较方便</p></li></ul></li>
</ul>

<pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">this</span>.$DIALOG = <span class="hljs-keyword">this</span>.createDIV(<span class="hljs-string">`</span>
</div><div class="hljs-line"><span class="hljs-string">    display:'none';</span>
</div><div class="hljs-line"><span class="hljs-string">    position: fixed;</span>
</div><div class="hljs-line"><span class="hljs-string">    top: 0;</span>
</div><div class="hljs-line"><span class="hljs-string">    left: 0;</span>
</div><div class="hljs-line"><span class="hljs-string">    z-index: 9998;</span>
</div><div class="hljs-line"><span class="hljs-string">    width: 100%;</span>
</div><div class="hljs-line"><span class="hljs-string">    height: 100%;</span>
</div><div class="hljs-line"><span class="hljs-string">    background: rgba(0, 0, 0, .8);</span>
</div><div class="hljs-line"><span class="hljs-string">    user-select: none;</span>
</div><div class="hljs-line"><span class="hljs-string">    opacity: 0;</span>
</div><div class="hljs-line"><span class="hljs-string">    transition: opacity .3s;</span>
</div><div class="hljs-line"><span class="hljs-string">`</span>);
</div><div class="hljs-line">createDIV(cssText = <span class="hljs-string">''</span>, type = <span class="hljs-string">'div'</span>) {
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.createElement(type);
</div><div class="hljs-line">    div.style.cssText = cssText;
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> div;
</div><div class="hljs-line">}
</div></code></pre>

<ul><li><p>外链样式表</p>

<ul>
<li><p>手动导入（推荐）</p></li>
<li><p>自动导入</p></li>
<li><p>用户可自己根据样式类，改为自己想要的样式 <code>!important</code></p></li>
<li><p>自动导入需要保障网络和CSS的加载顺序</p></li></ul></li>
</ul>

<p><strong>具体的代码开发</strong></p>

<hr>



<h4 id="问答和唠嗑">问答和唠嗑</h4>

<p>【唠嗑或者咨询课程】</p>

<p><img longdesc="./1585816667198.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p>【获取课件 == 回复 <code>课件</code>】</p>



<p><img longdesc="./1587204344716.png" alt="Alt text" title="" type="image/png" src="" class=""></p></div></body></html>